<template>
  <div class="my-ats" @mouseleave="close">
    <template v-show="isOpen">
      <div class="mini-title">我的ATS</div>
      <el-row>
        <el-col :span="12" class="t_left">我的简历</el-col>
        <el-col :span="12" class="t_right">
          <span class="is-gray">{{data.myResume}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="t_left">已联系</el-col>
        <el-col :span="12" class="t_right">
          <span class="is-green">{{data.alreadyConnected}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="t_left">未联系</el-col>
        <el-col :span="12" class="t_right">
          <span class="is-blue">{{data.unrelated}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="t_left">已推荐</el-col>
        <el-col :span="12" class="t_right">
          <span class="is-blue">{{data.recommended}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="t_left">流程中</el-col>
        <el-col :span="12" class="t_right">
          <span class="is-blue">{{data.inProcess}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="t_left">已offer</el-col>
        <el-col :span="12" class="t_right">
          <span class="is-green">{{data.alreadyOffer}}</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="t_left">回收站</el-col>
        <el-col :span="12" class="t_right">
          <span class="is-gray">{{data.trash}}</span>
        </el-col>
      </el-row>
    </template>
    <template v-show="!isOpen">
      
    </template>
  </div>
</template>

<script>
  import api from '@/api/api.js'
  import {Row, Col} from 'element-ui'
  export default {
    components: {
      [Row.name]: Row,
      [Col.name]: Col
    },
    props: ['isOpen'],
    created() {
      api.getMyATSCount().then(res => {
        this.data = res
      })
    },
    data () {
      return {
        data: {}
      }
    },
    methods: {
      close() {
        this.$emit('close', false)
      }
    },
  }
</script>
<style lang="scss">
  .my-ats{
    width: 200px;
    box-sizing: border-box;
    padding: 18px 10px;
    background: #f9f9f9;
    .mini-title{
      margin-bottom: 30px;
    }
    .el-row{
      margin: 12px 0;
      .t_left{
        text-align:left;
        padding-left: 12px;
        color: #6e7278;
        line-height: 20px;
        font-size: 14px;
      }
      .t_right{
        text-align: right;
        span{
          display: inline-block;
          padding: 0 10px;
          line-height: 20px;
          font-size: 14px;
          color: #fff;
          border-radius: 20px;
          margin-right: 10px;
        }
        span.is-gray{
          background-color: #a2aec8
        }
        span.is-green{
          background-color: #4eb619;
        }
        span.is-blue{
          background-color: #4c9de7;
        }
      } 
    }
  }
</style>


